<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 浏览器的ES module 模式默认是在页面装载完成后执行 -->
    <script type="module">
        // 1、export default 导出的数据通过 import 自定义变量 from "path" 进行加载
        // 2、export 导出的数据通过 import { 变量名 } from "path" 进行加载
        // import { createApp } from "../assets/vue3/vue.esm-browser.js";
        import { createApp } from "../assets/vue3/vue.esm-browser.prod.js";
        createApp({
            // ES6 的对象定义简写模式
            data(){
                return {
                    msg:"msg"
                }
            },
            methods:{
                showTip(){
                    alert( this.msg )
                }
            }
        }).mount("#app");
    </script>
</head>
<body>
    <div id="app">
        <p>模板插值表达式: {{ msg }} </p>
        <input type="text" v-model="msg">
        <input type="button" value="tip" v-on:click="showTip()">
    </div>
</body>
</html>